var hasVisibilitity = 1;
var hasWeather = 1;
var hasDetector = 1;
$(function () {
    //获取传参
    var pointId=GetUrlParam("pointId");
    vm.getPointInfo(pointId);
    vm.getEquipmentInfo(pointId);
    vm.getDataRoadDetectorByPointId(pointId);
    vm.getDataVisibilityByPointId(pointId);
    vm.getDataWeatherStationByPointId(pointId);
    vm.getRoadDetectorChart(pointId);
    //vm.getVisibilityChart(pointId);
});
function GetUrlParam(paraName) {
    var url = document.location.toString();
    var arrObj = url.split("?");

    if (arrObj.length > 1) {
        var arrPara = arrObj[1].split("&");
        var arr;

        for (var i = 0; i < arrPara.length; i++) {
            arr = arrPara[i].split("=");

            if (arr != null && arr[0] == paraName) {
                return arr[1];
            }
        }
        return "";
    }
    else {
        return "";
    }
}

var rDataTime=[];
var rRoadSurfaceTemp=[];
var rFriction=[];
var rWaterFilmHeight=[];
var vDataTime=[];
var vVisibility=[];
var wDataTime=[];
var wAirTemp=[];
var wWindSpeed=[];
var wRelativeHumidity=[];
var wPrecipitation=[];
var vm = new Vue({
	el:'#rrapp',
	data:{
        lhpInstallationPoint:{},
        lhpDataRoadDetector:{
            roadSurfaceTemp:"-",
            friction:"-",
            roadCondition:"-",
            salineConcentrationNacl:"-",
            icePercentage:"-",
            freezingTempNacl:"-",
            waterAmount:"-",
            iceAmount:"-",
            snowAmount:"-",
            waterFilmHeight:"-"
        },
        lhpDataVisibility:{
            visibility:"-"
        },
        lhpDataWeatherStation:{
            airTemp:"-",
            relativeHumidity:"-",
            windSpeed:"-",
            windDirection:"-",
            precipitation:"-",
            precipitationIntensity:"-"
        }
	},
	methods: {
        getPointInfo: function(pointId){
            $.get(baseURL + "baseinfo/lhpinstallationpoint/info/"+pointId, function(r){
                vm.lhpInstallationPoint = r.lhpInstallationPoint;
            });
        },
        getEquipmentInfo: function(pointId){
            $.get(baseURL + "baseinfo/lhpequipment/getEqupimentByPointId/"+pointId, function(r){
                var info;
                var list  = r.list;
                for(let i=0; i<list.length; i++){
                    if(list[i].equipmentType == 0){
                        $("#detectorDiv").css("display","none");
                        $("#vaisalaDetectorDiv").css("display","block");
                        hasVisibilitity = 0;
                        hasWeather = 0;
                        hasDetector = 0;
                        info += "<option value='3'>能见度</option>";
                        info += "<option value='2'>湿滑程度</option>";
                        info += "<option value='4'>水膜厚度</option>";
                        info += "<option value='5'>空气温度</option>";
                        info += "<option value='6'>风速</option>";
                        info += "<option value='7'>相对湿度</option>";
                        info += "<option value='8'>降水量</option>";
                    }else if(list[i].equipmentType == 1){
                        hasVisibilitity = 0;
                        info += "<option value='3'>能见度</option>";
                    }else if(list[i].equipmentType == 2){
                        hasWeather = 0;
                        info += "<option value='5'>空气温度</option>";
                        info += "<option value='6'>风速</option>";
                        info += "<option value='7'>相对湿度</option>";
                        info += "<option value='8'>降水量</option>";
                    }else if(list[i].equipmentType == 3){
                        if(list[i].manufactorType == 0){
                            $("#detectorDiv").css("display","none");
                            $("#vaisalaDetectorDiv").css("display","block");
                        }else{
                            info += "<option value='1'>路面温度</option>";
                        }
                        hasDetector = 0;
                        info += "<option value='2'>湿滑程度</option>";
                        info += "<option value='4'>水膜厚度</option>";
                    }
                }
                $("#chart1").html(info);
                setPage();
            });
        },
        getDataRoadDetectorByPointId:function (pointId) {
            $.get(baseURL + "baseinfo/lhpdataroaddetector/getDataRoadDetectorByPointId/"+pointId, function(r){
                if(r.lhpDataRoadDetector!=null){
                    vm.lhpDataRoadDetector = r.lhpDataRoadDetector;
                    if(vm.lhpDataRoadDetector.dataTime!=null && $('#time').text()=="-"){
                        $('#time').text(vm.lhpDataRoadDetector.dataTime)
                    }
                }
            });
        },
        getDataVisibilityByPointId:function (pointId) {
            $.get(baseURL + "baseinfo/lhpdatavisibility/getDataVisibilityByPointId/"+pointId, function(r){
                if(r.lhpDataVisibility!=null){
                    vm.lhpDataVisibility = r.lhpDataVisibility;
                    if(vm.lhpDataVisibility.dataTime!=null && $('#time').text()=="-"){
                        $('#time').text(vm.lhpDataRoadDetector.dataTime)
                    }
                }
            });
        },
        getDataWeatherStationByPointId:function (pointId) {
            $.get(baseURL + "baseinfo/lhpdataweatherstation/getDataWeatherStationByPointId/"+pointId, function(r){
                if(r.lhpDataWeatherStation != null){
                    vm.lhpDataWeatherStation = r.lhpDataWeatherStation;
                    if(vm.lhpDataWeatherStation.dataTime!=null){
                        $('#time').text(vm.lhpDataRoadDetector.dataTime && $('#time').text()=="-")
                    }
                }
            });
        },
        getRoadDetectorChart:function (pointId) {
            $.get(baseURL + "baseinfo/lhpdataroaddetector/roadDetectorChart/"+pointId, function(roadList){
                vm.getVisibilityChart(pointId);
                  for(var i=0;i<roadList.length;i++){
                      var crtTime = new Date(roadList[i].dataTime);
                      rDataTime.push( dateFtt("hh:mm",crtTime));
                      rRoadSurfaceTemp.push(roadList[i].roadSurfaceTemp);
                      rFriction.push(roadList[i].friction);
                      rWaterFilmHeight.push(roadList[i].waterFilmHeight);
                  }
            });
        },
        getWeatherChart:function (pointId) {
            $.get(baseURL + "baseinfo/lhpdataweatherstation/weatherStationChart/"+pointId, function(list){
                for(var i=0;i<list.length;i++){
                    var crtTime = new Date(list[i].dataTime);
                    wDataTime.push( dateFtt("hh:mm",crtTime));
                    wAirTemp.push(list[i].airTemp);
                    wRelativeHumidity.push(list[i].relativeHumidity);
                    wWindSpeed.push(list[i].windSpeed);
                    wPrecipitation.push(list[i].precipitation);
                }
                showEcharts($("#chart1 option:first").val());
            });
        },
        getVisibilityChart:function (pointId) {
            $.get(baseURL + "baseinfo/lhpdatavisibility/visibilityDataChart/"+pointId, function(vList){
                vm.getWeatherChart(pointId);
                for(var i=0;i<vList.length;i++){
                    var crtTime = new Date(vList[i].dataTime);
                    vDataTime.push(dateFtt("hh:mm",crtTime));
                   vVisibility.push(vList[i].visibility);
                }
            });
        }
	}
});
//时间格式化
function dateFtt(fmt,date)
{ //author: meizz
    var o = {
        "M+" : date.getMonth()+1,     //月份
        "d+" : date.getDate(),     //日
        "h+" : date.getHours(),     //小时
        "m+" : date.getMinutes(),     //分
        "s+" : date.getSeconds(),     //秒
        "q+" : Math.floor((date.getMonth()+3)/3), //季度
        "S" : date.getMilliseconds()    //毫秒
    };
    if(/(y+)/.test(fmt))
        fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
    for(var k in o)
        if(new RegExp("("+ k +")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
    return fmt;
}


function echarts1(){
    var myChart1 = echarts.init(document.getElementById('echart'));

    option1 = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: rDataTime,
            axisLine:{
                lineStyle:{
                    color:'white',
                    width:1
                }
            },
            axisLabel: {
                interval:1,
                rotate:40
            },
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            name:'单位：℃',
            type: 'value',
            axisLine:{
                lineStyle:{
                    color:'white',
                    width:1
                }
            }
        },
        legend: {
            data : [ {
                name :'路面温度',
                textStyle : {
                    color : "#ffffff"
                }
            }
            ]
        },


        grid:{
            left:30,
            right:10,
            top:40,
            bottom:30
        },
        series:[{
            name:'路面温度',
            data:rRoadSurfaceTemp,
            type:'line'
        }

        ]
    };
    myChart1.setOption(option1,true);
}
function echarts2(){
    var myChart2 = echarts.init(document.getElementById('echart'));
    option2 = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: rDataTime,
            axisLine:{
                lineStyle:{
                    color:'white',
                    width:1
                }
            },
            axisLabel: {
                interval:1,
                rotate:40
            },
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            name:'',
            type: 'value',
            min: 0,
            max: 1,
            axisLine:{
                lineStyle:{
                    color:'white',
                    width:1
                }
            }
        },
        legend: {
            data : [ {
                name :'湿滑程度',
                textStyle : {
                    color : "#ffffff"
                }
            }
            ]
        },


        grid:{
            left:30,
            right:10,
            top:40,
            bottom:30
        },
        series:[{
            name:'湿滑程度',
            data:rFriction,
            type:'line'
        }

        ]
    };
    myChart2.setOption(option2,true);
}
function echarts3(){
    var myChart3 = echarts.init(document.getElementById('echart'));
    option3 = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: rDataTime,
            axisLine:{
                lineStyle:{
                    color:'white',
                    width:1
                }
            },
            axisLabel: {
                interval:1,
                rotate:40
            },
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            name:'单位：μm',
            type: 'value',
            axisLine:{
                lineStyle:{
                    color:'white',
                    width:1
                }
            }
        },
        legend: {
            data : [ {
                name :'水膜厚度',
                textStyle : {
                    color : "#ffffff"
                }
            }
            ]
        },
        grid:{
            left:40,
            right:10,
            top:40,
            bottom:30
        },
        series:[{
            name:'水膜厚度',
            data:rWaterFilmHeight,
            type:'line'
        }

        ]
    };
    myChart3.setOption(option3,true);
}

function echarts4(){
    var myChart4 = echarts.init(document.getElementById('echart'));
    option4 = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: vDataTime,
            axisLine:{
                lineStyle:{
                    color:'white',
                    width:1
                }
            },
            axisLabel: {
                interval:1,
                rotate:40
            },
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            name:'单位：m',
            type: 'value',
            min: 0,
            max: 2000,
            axisLine:{
                lineStyle:{
                    color:'white',
                    width:1
                }
            }
        },
        legend: {
            data : [ {
                name :'能见度',
                textStyle : {
                    color : "#ffffff"
                }
            }
            ]
        },


        grid:{
            left:50,
            right:10,
            top:40,
            bottom:30
        },
        series:[{
            name:'能见度',
            data:vVisibility,
            type:'line'
        }

        ]
    };
    myChart4.setOption(option4,true);
}
function echarts5(){
    var myChart5 = echarts.init(document.getElementById('echart'));
    option5 = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: wDataTime,
            axisLine:{
                lineStyle:{
                    color:'white',
                    width:1
                }
            },
            axisLabel: {
                interval:1,
                rotate:40
            },
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            name:'单位：℃',
            type: 'value',
            //min: 0,
            //max: 2000,
            axisLine:{
                lineStyle:{
                    color:'white',
                    width:1
                }
            }
        },
        legend: {
            data : [ {
                name :'空气温度',
                textStyle : {
                    color : "#ffffff"
                }
            }
            ]
        },


        grid:{
            left:50,
            right:10,
            top:40,
            bottom:30
        },
        series:[{
            name:'空气温度',
            data:wAirTemp,
            type:'line'
        }

        ]
    };
    myChart5.setOption(option5,true);
}
function echarts6(){
    var myChart6 = echarts.init(document.getElementById('echart'));
    option6 = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: wDataTime,
            axisLine:{
                lineStyle:{
                    color:'white',
                    width:1
                }
            },
            axisLabel: {
                interval:1,
                rotate:40
            },
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            name:'单位：m/s',
            type: 'value',
            min: 0,
            //max: 2000,
            axisLine:{
                lineStyle:{
                    color:'white',
                    width:1
                }
            }
        },
        legend: {
            data : [ {
                name :'风速',
                textStyle : {
                    color : "#ffffff"
                }
            }
            ]
        },


        grid:{
            left:50,
            right:10,
            top:40,
            bottom:30
        },
        series:[{
            name:'风速',
            data:wWindSpeed,
            type:'line'
        }

        ]
    };
    myChart6.setOption(option6,true);
}
function echarts7(){
    var myChart7 = echarts.init(document.getElementById('echart'));
    option7 = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: wDataTime,
            axisLine:{
                lineStyle:{
                    color:'white',
                    width:1
                }
            },
            axisLabel: {
                interval:1,
                rotate:40
            },
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            name:'单位：%',
            type: 'value',
            min: 0,
            max: 100,
            axisLine:{
                lineStyle:{
                    color:'white',
                    width:1
                }
            }
        },
        legend: {
            data : [ {
                name :'相对湿度',
                textStyle : {
                    color : "#ffffff"
                }
            }
            ]
        },


        grid:{
            left:50,
            right:10,
            top:40,
            bottom:30
        },
        series:[{
            name:'相对湿度',
            data:wRelativeHumidity,
            type:'line'
        }

        ]
    };
    myChart7.setOption(option7,true);
}
function echarts8(){
    var myChart8 = echarts.init(document.getElementById('echart'));
    option8 = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: wDataTime,
            axisLine:{
                lineStyle:{
                    color:'white',
                    width:1
                }
            },
            axisLabel: {
                interval:1,
                rotate:40
            },
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            name:'单位：mm',
            type: 'value',
            min: 0,
            //max: 100,
            axisLine:{
                lineStyle:{
                    color:'white',
                    width:1
                }
            }
        },
        legend: {
            data : [ {
                name :'降水量',
                textStyle : {
                    color : "#ffffff"
                }
            }
            ]
        },


        grid:{
            left:50,
            right:10,
            top:40,
            bottom:30
        },
        series:[{
            name:'降水量',
            data:wPrecipitation,
            type:'line'
        }

        ]
    };
    myChart8.setOption(option8,true);
}
function setPage(){
    var divWidth = $("#div").css("width");
    divWidth = divWidth.substring(0,divWidth.length-2);
    var detectorDivWidth = $("#detectorDiv").css("width");
    detectorDivWidth = detectorDivWidth.substring(0,detectorDivWidth.length-2);
    if(hasVisibilitity == 1){
        $("#visibilitiDiv").css("display","none");
        $("#echartDiv").css("height","90%");
    }
    if(hasDetector ==1){
        divWidth = Number(divWidth)+Number(detectorDivWidth);
        $("#div").css("width",divWidth+"px");
        $("#detectorDiv").css("display","none");
    }
    if(hasWeather == 1){
        divWidth = Number(divWidth)+Number(detectorDivWidth);
        $("#div").css("width",divWidth+"px");
        $("#weatherDiv").css("display","none");
    }
}
$("#chart1").change(function(){
    var options=$("#chart1 option:selected");
    showEcharts(options.val());
});
function showEcharts(index){
    if(index == 1){
        echarts1();
    }else if(index == 2){
        echarts2();
    }else if(index == 4){
        echarts3();
    }else if(index == 3){
        echarts4();
    }else if(index == 5){
        echarts5();
    }else if(index == 6){
        echarts6();
    }else if(index == 7){
        echarts7();
    }else if(index == 8){
        echarts8();
    }
}

